<template>
    <!-- 地图区域 -->
    <div class="main-top-box">
        <div class="loadingbox" v-if="isloading">
            <div class="loading"></div>
        </div>
        <div class="main-swiper-box" v-else>
            <el-carousel height="220px" direction="vertical" :autoplay="true" ref="toggle" v-if="isshow">
                <el-carousel-item style="border-radius: 10px;" :name="item.pos_name" v-for="item in articlelistandpos"
                    @click="goToArticle(item)" indicator-position="none">
                    <div class="carousel-item">
                        <img :src="item.article_cover">
                        <div class="nameanddescrib">
                            <div>我的足迹之:</div>
                            <h1>{{ item.pos_name }}</h1>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <el-carousel height="220px" direction="vertical" v-else="isshow">

                <el-carousel-item style="border-radius: 10px;" indicator-position="none">
                    <div class="carousel-item">
                        <img src="http://imgfile.xxkdjy.top/shouye.jpg">
                        <div class="nameanddescrib">
                            <h1>暂无足迹</h1>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="loadingbox" v-if="isloading">
            <div class="loading"></div>
        </div>
        <div class="main-map-box " id="map-container" v-show="!isloading">

        </div>
    </div>
</template>

<script setup>
// script标签后添加
window._AMapSecurityConfig = {
    securityJsCode: 'd54fac9cfd55e01b4d8fa8a07e72f0c7'
}
import { ref, onMounted, onBeforeUnmount } from "vue";
import { SiteInfoStore } from "@/stores/baseSiteInfo.js";
import { getarticlebypos } from "@/api/article.js"
let SiteInfo = SiteInfoStore()
let toggle = ref()
import AMapLoader, { load } from '@amap/amap-jsapi-loader';
import { deepClone } from "@/utils";
import { useRouter } from "vue-router";
let router = useRouter()
let map = null;
var geocoder
let positionlist = ref([])
let posAndName = ref([])
let articlelistandpos = ref([])
let isloading = ref(true)
let isshow = ref(true)
onMounted(() => {
    /* 高德的 */
    getLocations()
})
function initMap() {
    AMapLoader.load({
        key: "23da9b0447f4646fc13cd0f2831047d5", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then(async (AMap) => {
            map = new AMap.Map("map-container", {
                // 设置地图容器id
                viewMode: "2D", // 是否为3D地图模式
                zoom: 5, // 初始化地图级别
            })
            geocoder = new AMap.Geocoder({
                city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            })
            var toolbar = new AMap.ToolBar(); //缩放工具条实例化
            var scale = new AMap.Scale(); //比例尺
            map.addControl(toolbar);
            map.addControl(scale);
            /* 将地址转化为经纬度 */
            posAndName.value = await getLocationss()
            addMarker(AMap)
        })
        .catch((e) => {
            console.log(e);
        });
}
/* 添加标点 */
function addMarker(AMap) {
    for (let i = 0; i < posAndName.value.length; i++) {
        let pos = posAndName.value[i].pos
        const position = new AMap.LngLat(pos.lng, pos.lat); // Marker经纬度
        let marker = new AMap.Marker({
            position: position,
            extData: posAndName.value[i],
        })
        marker.on("click", function (e) {
            let item = e.target.getExtData()
            map.panTo([item.pos.lng,item.pos.lat]);
            toggle.value.setActiveItem(item.name)
        })
        map.add(marker);
    }
    isloading.value = false
}
let getAddress = async () => {
    /* 发送请求获取地址的列表 */
    let res = await getarticlebypos()
    let poslist = []
    if (res.data.status == 200) {
        articlelistandpos.value = deepClone(res.data.data)
        poslist = res.data.data.map(item => {
            return item.pos_name
        })
    } else if (res.data.status == 400) {
        ElNotification.success({
            title: 'Success',
            message: '暂无足迹',
            offset: 50,
        })
        isshow.value = false
    }
    return poslist
}
/* 地址解析为经纬度 */
async function getLocationss() {
    let promiselist = []
    for (let i = 0; i < positionlist.value.length; i++) {
        let promise = new Promise((resolve, reject) => {
            geocoder.getLocation(positionlist.value[i], function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result中对应详细地理坐标信息
                    let { lng, lat } = result.geocodes[0].location
                    resolve({
                        name: positionlist.value[i],
                        pos: {
                            lng,
                            lat,
                        }
                    })
                }
            })
        })
        promiselist.push(promise)
    }
    let result = await Promise.all(promiselist)
    return result
}
/* 获取用户地址 */
async function getLocations() {
    positionlist.value = await getAddress()
    initMap()
}
function goToArticle(item) {
    router.push({
        path: "/article",
        query: {
            id: item.id
        }
    })
}
onBeforeUnmount(() => {
    map?.destroy();
})
</script>

<style scoped lang="scss">
.loadingbox {
    width: 49%;
    height: 220px;
    border-radius: 20px;
    position: relative;

    .loading {
        display: block;
        position: absolute;
        top: 35%;
        left: 35%;
        width: 6px;
        height: 10px;
        animation: rectangle infinite 1s ease-in-out -0.2s;
        background-color: #000;
    }

    .loading:before,
    .loading:after {
        position: absolute;
        width: 6px;
        height: 10px;
        content: "";
        background-color: #000;
    }

    .loading:before {
        left: -14px;
        animation: rectangle infinite 1s ease-in-out -0.4s;
    }

    .loading:after {
        right: -14px;
        animation: rectangle infinite 1s ease-in-out;
    }

    @keyframes rectangle {

        0%,
        80%,
        100% {
            height: 20px;
            box-shadow: 0 0 #000;
        }

        40% {
            height: 30px;
            box-shadow: 0 -20px #000;
        }
    }
}

.messageIndex {
    z-index: 9999 !important;
}

.carousel-item {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    position: relative;

    img {
        height: 100%;
        width: 100%;
        border-radius: 10px;

        &:hover {

            transform: scale(1.1);
        }
    }

    .nameanddescrib {
        @include userTheme {
            font-family: getThemeValue("fontfamily");
        }

        padding: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.3);
        height: 30%;
        width: 50%;
        border-radius: 20px;
        z-index: 9999;
        background-image: -webkit-linear-gradient(bottom, rgb(213, 48, 19), #1be1a9, rgb(195, 44, 230));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        h1 {
            margin-top: 5px;
            text-align: center;
            font-size: $font-size-l;
        }
    }
}

.main-top-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.main-swiper-box {
    width: 49%;
    height: 220px;
    border-radius: 20px;

}

.main-map-box {
    width: 49%;

    border-radius: 20px;
    height: 220px;
}

:deep(.amap-logo) {
    display: none !important;
}

:deep(.amap-copyright) {
    bottom: -100px;
    display: none !important;
}

@media screen and (max-width: 650px) {
    .nameanddescrib {
        width: 70% !important;
    }

}
</style>